<template>
  <div class="container">
    <div class="video-detail-top" id="scrollBody">
      <div class="video-box" id="videoBar">
        <img :src="videoDetailMes.video_cover" alt class="videoPic" v-if="!isPlay" />
        <video
          v-else
          id="video"
          ref="video"
          :src="videoDetailMes.video_url"
          :poster="videoDetailMes.video_cover"
          autoplay
          controls
        ></video>
        <div class="play-btn">
          <img v-show="!isPlay" :src="playBtn" @click="changeStauts" alt />
          <!-- <img v-show="isPlay" :src="pauseBtn" @click="changeStauts" alt /> -->
        </div>
        <div class="option-box">
          <img src alt class="share" />
          <img src alt class="more" />
        </div>
        <!-- <div class="enlarge">//自定义全屏按钮
          <img :src="enlarge" alt class="enlarge" />
        </div>-->
        <!-- <div class="progress">
          <div class="progress-current">
            <div class="progress-btn"></div>
          </div>
        </div>-->
      </div>
      <div class="video-main">
        <div class="video-tit">
          <div class="video-name fs-32">{{videoDetailMes.title}}</div>
        </div>
        <div class="video-tip">
          <div class="play-times fs-26">{{videoDetailMes.run_num}}次播放</div>
          <div class="cards">
            <span
              class="songer-name fs-26"
              v-show="videoDetailMes.singer_name"
            >{{videoDetailMes.singer_name}}</span>
            <span class="type" v-show="videoDetailMes.singer_type">{{videoDetailMes.singer_type}}</span>
          </div>
        </div>
        <div class="desc fs-28">{{videoDetailMes.content}}</div>
        <div class="icons">
          <div class="items">
            <img :src="praise" @click="supportVideo" alt v-show="videoDetailMes.is_click == 0" />
            <img :src="praised" @click="supportVideo" alt v-show="videoDetailMes.is_click == 1" />
            <span class="num">{{videoDetailMes.click_number}}</span>
          </div>
          <div class="items">
            <img :src="collected" v-if="videoDetailMes.is_collect == 1" alt @click="collectVideo" />
            <img :src="collect" v-else alt @click="collectVideo" />
            <span class="num">{{videoDetailMes.collect_number}}</span>
          </div>
          <div class="items" @click="goToComment">
            <img :src="comment" alt />
            <span class="num">{{videoDetailMes.comment_number}}</span>
          </div>
          <div class="items">
            <img :src="share" alt @click="toShare" />
            <span class="num">{{videoDetailMes.share_number}}</span>
          </div>
        </div>
      </div>
      <div class="user-mes" id="userBar" :class="{fixed:isFixed}">
        <div class="left">
          <img :src="videoDetailMes.user_avator" alt />
          <span class="name fs-32">{{videoDetailMes.nickname}}</span>
        </div>
        <div class="right">
          <div class="concern fs-24" @click="concernSomeone(videoDetailMes.user_id)">
            <img :src="noconcern" alt v-show="videoDetailMes.is_attention == 0" />
            <img :src="concern" alt v-show="videoDetailMes.is_attention == 1" />
            <span class="txt" v-show="videoDetailMes.is_attention == 0">关注</span>
            <span class="txt" v-show="videoDetailMes.is_attention == 1">已关注</span>
          </div>
        </div>
      </div>
      <!-- 相关音乐部分 -->
      <div class="music-about" v-if="musicMes && Object.keys(musicMes).length">
        <div class="mb-title fs-28">相关音乐</div>
        <div class="mb-list">
          <div class="md-items" @click="toPlayMusic">
            <div class="left">
              <div class="song-pic">
                <img :src="musicMes.background" alt />
              </div>
              <div class="song-text">
                <div class="singer-name fs-32">{{musicMes.music_name}}</div>
                <div class="song-name">{{musicMes.singer_name}}-{{musicMes.music_name}}</div>
              </div>
            </div>
            <div class="right">
              <img :src="videoPlay" alt class="play" v-show="musicMes.id == 0" />
              <img :src="moreB" alt class="more" />
            </div>
          </div>
        </div>
      </div>
      <!-- 相关视频部分 -->
      <div class="video-about" v-if="videoAboutList && videoAboutList.length != 0">
        <div class="va-title">相关视频</div>
        <div class="va-list">
          <div
            class="items"
            v-for="(item,index) in videoAboutList"
            :key="index"
            @click="toVideoDetail(item.id)"
          >
            <div class="left">
              <div class="play-s">
                <img :src="playBtnS" alt />
                <span class="fs-20">20</span>
              </div>
              <video class="img" ref="video" :src="item.video_url" :poster="item.video_cover"></video>
            </div>
            <div class="right">
              <div class="song-title fs-32">{{item.title}}</div>
              <div class="tips">
                <div class="time fs-24">{{item.updated_at}}</div>
                <div class="singer-name fs-24">{{item.singerName}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 精彩评论部分 -->
      <div class="comment" id="commentBar">
        <div class="comment-title">精彩评论</div>
        <div class="comment-list">
          <div
            class="items"
            v-for="(item,index) in commentList"
            :key="index"
            @click="showReplyModel(item)"
          >
            <div class="left">
              <img :src="item.user_avator" alt />
            </div>
            <div class="right">
              <div class="top">
                <div class="t-left">
                  <div class="user-name fs-26">{{item.nickname}}</div>
                  <div class="timer">{{item.created_at}}</div>
                </div>
                <div class="t-right">
                  <div class="num fs-24">{{item.comment_click_number}}</div>
                  <div class="praise" @click.stop="thumbsUp(item.id)">
                    <img :src="praised" alt v-if="item.is_click == 1" />
                    <img :src="praise" alt v-else />
                  </div>
                </div>
              </div>
              <div class="centers fs-32">{{item.content}}</div>
              <div
                class="bottom fs-24"
                v-show="item.reply_number"
                @click="toCommentReply(item.id)"
              >{{item.reply_number}}条回复</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 发表评论部分 -->
    <div class="send-comment" v-if="isPublish">
      <input type="text" name id placeholder="请填写评论内容..." v-model="desc" />
      <div class="send-btn fs-28" @click="sendComment">发送</div>
    </div>
    <!-- 回复评论部分 -->
    <div class="send-comment" id="replayBox" v-else>
      <input
        type="text"
        name
        :placeholder="replyContent"
        @blur="stopReply"
        v-model="descReply"
        v-focus="picFocusStatus"
      />
      <div class="send-btn fs-28" @click="sendReplyComment">发送</div>
    </div>
    <!-- 回复评论模态框 -->
    <div class="comment-model" @touchmove.prevent v-show="isShowReply" @click="closeModel">
      <div class="content" @click.stop="replyComment">
        <div class="reply-comment fs-28">回复评论</div>
      </div>
    </div>
    <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel>
  </div>
</template>

<script>
export default {
  name: "mall",
  inject: ["reload"],
  data() {
    return {
      store: this.getStore(),
      desc: "", //评论数据
      title: "视频详情",
      isPlay: false, //当前视频是否是播放状态
      playBtn: require("@/assets/index/playVideoB.png"),
      playBtnS: require("@/assets/index/playVideoS.png"),
      pauseBtn: require("@/assets/index/zanting.png"),
      enlarge: require("@/assets/index/enlarge.png"),
      praise: require("@/assets/index/praise.png"),
      collect: require("@/assets/index/collectblack.png"),
      collected: require("@/assets/index/video-collected.png"),
      comment: require("@/assets/index/comment.png"),
      praised: require("@/assets/index/support-mine.png"),
      enlarge: require("@/assets/index/enlarge.png"),
      headerPic: require("@/assets/image/cove.png"),
      concern: require("@/assets/index/concern.png"),
      noconcern: require("@/assets/index/noconcern.png"),
      moreB: require("@/assets/index/moreMes.png"),
      videoPlay: require("@/assets/index/video.png"),
      share: require("@/assets/index/share-video.png"),
      isFixed: false,
      currentTime: 1,
      videoAboutList: [
        {
          id: 1,
          singerName: "林宥嘉",
          songName: "残酷月光",
          time: "04:02"
        },
        {
          id: 2,
          singerName: "林宥嘉",
          songName: "别让我走远",
          time: "04:53"
        }
      ], //相关视频数据
      commentList: [
        {
          id: 1,
          userName: "呆萌小龟",
          time: "5小时以前",
          num: 0,
          content:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节80小接Solo麦…",
          praiseNum: 4
        },
        {
          id: 2,
          userName: "呆萌小龟",
          time: "5小时以前",
          num: 3,
          content:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节80小接Solo麦…",
          praiseNum: 4
        },
        {
          id: 3,
          userName: "呆萌小龟",
          time: "5小时以前",
          num: 0,
          content:
            "麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节80小接Solo麦…",
          praiseNum: 4
        }
      ], //评论数据
      videoId: null, //视频id
      videoDetailMes: {}, //视频详情的数据
      aboutMusicId: null, //相关音乐id
      aboutMusicType: "", //相关音乐类型
      musicMes: {}, //相关音乐信息
      scroller: null, //页面滚动对象
      isShowReply: false, //是否展示回复模态框
      isPublish: true, //判断当前是发布评论  还是回复评论
      replyContent: "", //回复占位文本内容
      picFocusStatus: false,
      descReply: "", //回复评论的内容
      replyCommentId: null, //被回复评论的id
      leaderModal: false //控制微信内分享模态框
    };
  },
  watch: {
    $route: "getPath",
    currentTime: function(val) {
      console.log(val, "--val");
    }
  },
  directives: {
    focus: {
      inserted: function(el, { value }) {
        if (value) {
          el.focus();
        }
      }
    }
  },
  components: {},
  methods: {
    // 去播放音乐
    toPlayMusic() {
      this.store.setData(this.musicMes.id, 1);
      this.getSongSheetPlayingList(this.musicMes.id);
    },
    // 获取歌单列表的播放列表
    getSongSheetPlayingList(id) {
      const url =
        this.$host1 + `home/musicMainMsg?music_id=` + id + `&music_from=` + 1;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.playingList = res.data.data.list;
            this.store.playingList = this.playingList;
            window.localStorage.setItem(
              "playingList",
              JSON.stringify(this.playingList)
            );
            this.store.isPlay = true;
            this.store.isFullPlay = true;
          } else {
            this.AlertWin(res.data.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 监听路由的变化
    getPath() {
      this.videoId = this.$route.query.id;
      this.getVideoDetail();
      this.aboutMusic(); //相关音乐
      this.aboutVideo(); //相关视频
      this.videoComment(); //精彩评论
    },
    // 相关视频   ----视频详情页面
    toVideoDetail(id) {
      this.$router.push({
        path: "/index/video-Detail",
        query: { id: id }
      });
      this.$forceUpdate();
      this.reload();
    },
    // 去分享
    toShare() {
      console.log(this.videoDetailMes, "--this.videoDetailMes");
      this.is_weixn();
      // 记录进入app时的url
      if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
        window.entryUrl = location.href.split("#")[0];
      }
      if (this.isapp == 0) {
        this.wxshare.getWxmessage(
          "分享视频",
          this.videoDetailMes.title,
          /(Android)/i.test(navigator.userAgent)
            ? location.href.split("#")[0]
            : window.entryUrl,
          this.videoDetailMes.video_cover,
          location.href
        );
      } else if (this.isapp == 1) {
        var sendData = {
          type: "1",
          data: {
            title: this.videoDetailMes.title,
            description: this.videoDetailMes.content,
            shareimg: this.videoDetailMes.video_cover,
            share_url: location.href
          }
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    // 判断是否在微信中打开
    is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 表示在微信里面
        this.leaderModal = true;
        return true;
      } else {
        return false;
      }
    },
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    // 关注某人
    concernSomeone(id) {
      const url = this.$host1 + `home/friend/eachAttention`;
      var params = {
        user_love_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getVideoDetail();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 切换播放状态
    changeStauts() {
      this.$forceUpdate();
      this.isPlay = !this.isPlay;
      // if (this.isPlay) {
      //   document.getElementById("#video").play();
      //   this.currentTime = this.$refs.video.currentTime;
      //   console.log(this.currentTime, "--this.currentTime");
      // } else {
      //   document.getElementById("#video").pause();
      // }
    },
    // 视频收藏
    collectVideo() {
      //
      const url = this.$host1 + `home/dynamic/dynamicVideoCollect`;
      var params = {
        dynamic_id: this.videoId
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getVideoDetail();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取视频详情
    getVideoDetail() {
      const url =
        this.$host1 + `home/dynamic/videoInfo?dynamic_id=` + this.videoId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--视频详情");
          if (res.data.code == 200) {
            this.videoDetailMes = res.data.data;
            if (this.videoDetailMes.music_id && this.videoDetailMes.type) {
              this.aboutMusicId = this.videoDetailMes.music_id;
              this.aboutMusicType = this.videoDetailMes.type;
              this.aboutMusic();
            }
            this.$forceUpdate();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 动态视频点赞
    supportVideo() {
      const url = this.$host1 + `home/dynamic/ClickRecord`;
      var params = {
        dynamic_id: this.videoId
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getVideoDetail();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 相关音乐
    aboutMusic() {
      const url =
        this.$host1 +
        `home/dynamic/relatedMusic?music_id=` +
        this.aboutMusicId +
        `&music_type=` +
        this.aboutMusicType;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--相关音乐");
          if (res.data.code == 200) {
            this.musicMes = res.data.data;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 相关视频
    aboutVideo() {
      const url =
        this.$host1 + `home/dynamic/relatedVideo?dynamic_id=` + this.videoId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--相关视频");
          if (res.data.code == 200) {
            this.videoAboutList = res.data.data;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 屏幕滚动距离监听
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var y = document.querySelector("#videoBar").offsetHeight;
      var offsetTop = document.querySelector("#userBar").offsetTop - y;
      if (scrollTop > offsetTop) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 滑动到评论部分
    goToComment() {
      var bar1 = document.querySelector("#videoBar").offsetHeight;
      var bar2 = document.querySelector("#userBar").offsetHeight;
      let address =
        document.querySelector("#commentBar").offsetTop - bar1 - bar2;
      window.scrollTo(0, 255);
    },
    // 精彩评论
    videoComment() {
      const url =
        this.$host1 +
        `home/dynamic/wonderFulComment?dynamic_id=` +
        this.videoId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--精彩评论");
          if (res.data.code == 200) {
            this.commentList = res.data.data;
          } else {
            // this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 给评论点赞
    thumbsUp(id) {
      const url = this.$host1 + `home/dynamic/commentClickRecord`;
      var params = {
        comment_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.videoComment(); //重新调用下获取精彩评论的接口
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复评论框失去焦点且文本框内没有内容或者已经回复结束
    stopReply() {
      if (this.descReply == "") {
        this.isPublish = true;
      }
    },
    // 显示回复评论模态框
    showReplyModel(item) {
      console.log(item, "---item");
      console.log(item.comment_id, "---item.comment_id");
      this.replyCommentId = item.comment_id;
      this.replyContent = "回复" + item.nickname;
      this.isShowReply = true;
    },
    // 查看评论回复
    // 查看评论回复
    toCommentReply(id) {
      this.$router.push({
        path: "/index/comment-reply",
        query: { status: 4, id: id }
      });
    },
    // 关闭模态框
    closeModel() {
      this.isPublish = true;
      this.isShowReply = false;
    },
    // 点击了回复评论
    replyComment() {
      this.isShowReply = false;
      this.isPublish = false;
      this.picFocusStatus = true;
    },
    // 视频评论
    sendComment() {
      console.log(this.desc, "---this.desc");
      if (!this.desc) {
        this.AlertWin("请填写评论内容奥");
      }
      const url = this.$host1 + `home/dynamic/publishComment`;
      var params = {
        dynamic_id: this.videoId,
        content: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.desc = "";
            this.videoComment(); //重新调用下获取精彩评论的接口
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 发送回复评论
    sendReplyComment() {
      const url = this.$host1 + `home/dynamic/replyComment`;
      var params = {
        comment_id: this.replyCommentId,
        reply_text: this.descReply
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
            this.descReply = "";
            this.videoComment();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created() {
    this.videoId = this.$route.query.id;
    this.getVideoDetail();
    this.aboutMusic(); //相关音乐
    this.aboutVideo(); //相关视频
    this.videoComment(); //精彩评论
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  .video-detail-top {
    padding-top: 4rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
    width: 100%;
    // background-color: #fff;
    .video-box {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 4rem;
      padding-bottom: 0.2rem;
      box-sizing: border-box;
      z-index: 99;
      background-color: #fff;
      .videoPic {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      video {
        width: 100%;
        height: 4rem;
      }
      .play-btn {
        position: absolute;
        left: 50%;
        top: 40%;
        width: 0.58rem;
        height: 0.7rem;
        transform: translateX(-50%);
        img {
          width: 100%;
        }
      }
      .enlarge {
        position: absolute;
        width: 0.27rem;
        height: 0.27rem;
        bottom: 0.22rem;
        right: 0.3rem;
        img {
          width: 100%;
        }
      }
      .progress {
        position: absolute;
        width: 100%;
        height: 0.01rem;
        .progress-current {
          width: 25%;
          height: 0.01rem;
          position: relative;
          background-color: #8213bd;
          .progress-btn {
            position: absolute;
            width: 0.17rem;
            height: 0.17rem;
            border-radius: 50%;
            right: 0;
            top: -0.08rem;
            background-color: #8213bd;
          }
        }
      }
    }

    .video-main {
      width: 100%;
      padding: 0 0.26rem 0 0.22rem;
      box-sizing: border-box;
      padding-top: 0.45rem;
      background-color: #fff;
      .video-tit {
        width: 87%;
        margin-bottom: 0.35rem;
        .video-name {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          line-height: 0.48rem;
        }
      }
      .video-tip {
        display: flex;
        margin-bottom: 0.33rem;
        .play-times {
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
          margin-right: 0.42rem;
        }
        .cards {
          .songer-name,
          .type {
            height: 0.5rem;
            background-color: #efefef;
            padding: 0.13rem 0.27rem;
            box-sizing: border-box;
            border-radius: 0.25rem;
          }
        }
      }
      .desc {
        width: 100%;
        box-sizing: border-box;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 0.48rem;
      }
      .icons {
        display: flex;
        flex-direction: row;
        margin-top: 0.63rem;
        padding-bottom: 0.34rem;
        box-sizing: border-box;
        justify-content: space-around;
        .items {
          display: flex;
          flex-direction: column;
          img {
            margin: 0 auto;
            width: 0.44rem;
            height: 0.42rem;
            margin-bottom: 0.14rem;
          }
          span {
            text-align: center;
            font-size: 0.22rem;
            color: #666666;
          }
        }
      }
    }

    .user-mes {
      width: 100%;
      height: 1.1rem;
      padding: 0.19rem 0.25rem 0.18rem 0.27rem;
      background-color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 0.01rem solid rgba(245, 245, 245, 1);
      .left {
        display: flex;
        align-items: center;
        img {
          margin-right: 0.21rem;
          width: 0.73rem;
          height: 0.73rem;
          border-radius: 50%;
        }
        span {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
          line-height: 0.48rem;
        }
      }
      .right {
        .concern {
          // width: 1.18rem;
          height: 0.5rem;
          line-height: 0.5rem;
          background: rgba(116, 8, 180, 1);
          color: rgba(255, 255, 255, 1);
          padding: 0 0.1rem 0 0.5rem;
          text-align: right;
          box-sizing: border-box;
          border-radius: 0.25rem;
          position: relative;
          display: flex;
          img {
            width: 0.22rem;
            height: 0.22rem;
            position: absolute;
            left: 0.2rem;
            top: 0.14rem;
          }
        }
      }
    }
    .fixed {
      position: fixed;
      left: 0;
      top: 4rem;
      z-index: 99;
    }
    .music-about {
      padding: 0.35rem 0.24rem 0.3rem;
      box-sizing: border-box;
      margin-top: 0.28rem;
      margin-bottom: 0.14rem;
      background-color: #fff;
      .mb-title {
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        margin-bottom: 0.33rem;
      }
      .mb-list {
        .md-items {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            display: flex;
            .song-pic {
              width: 0.78rem;
              height: 0.78rem;
              margin-right: 0.24rem;
              img {
                width: 100%;
              }
            }
            .song-text {
              .singer-name {
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                margin-bottom: 0.12rem;
              }
              .song-name {
                color: rgba(153, 153, 153, 1);
                line-height: 0.32rem;
              }
            }
          }
          .right {
            display: flex;
            .more {
              width: 0.07rem;
              height: 0.3rem;
              margin-left: 0.55rem;
            }
            .play {
              width: 0.33rem;
              height: 0.33rem;
            }
          }
        }
      }
    }

    .video-about {
      background-color: #fff;
      padding: 0.35rem 0.24rem 0.3rem;
      box-sizing: border-box;
      margin-bottom: 0.14rem;
      .va-title {
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        margin-bottom: 0.33rem;
      }
      .va-list {
        .items {
          display: flex;
          margin-bottom: 0.3rem;
          .left {
            position: relative;
            margin-right: 0.34rem;
            .play-s {
              position: absolute;
              display: flex;
              align-items: center;
              top: 0.2rem;
              right: 0.3rem;
              img {
                width: 0.12rem;
                height: 0.16rem;
                margin-right: 0.1rem;
              }
              span {
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
              }
            }
            .img {
              width: 2.2rem;
              height: 1.5rem;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .right {
            .song-title {
              width: 100%;
              color: rgba(68, 68, 68, 1);
              line-height: 0.48rem;
              margin-bottom: 0.2rem;
              white-space: wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .tips {
              display: flex;
              .time {
                font-weight: 500;
                color: rgba(153, 153, 153, 1);
                line-height: 0.32rem;
                margin-right: 0.12rem;
              }
              .singer-name {
                font-weight: 500;
                color: rgba(153, 153, 153, 1);
                line-height: 0.32rem;
              }
            }
          }
        }
        .items:last-child {
          margin: 0;
        }
      }
    }

    //精彩评论部分的样式
    .comment {
      background-color: #fff;
      padding: 0.21rem 0.24rem 0.3rem;
      box-sizing: border-box;
      .comment-title {
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        margin-bottom: 0.33rem;
      }
      .comment-list {
        .items {
          display: flex;
          margin-bottom: 0.33rem;
          .left {
            margin-right: 0.2rem;
            img {
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 50%;
            }
          }
          .right {
            width: 100%;
            .top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 0.27rem;
              .t-left {
                .user-name {
                  font-weight: 500;
                  color: rgba(102, 102, 102, 1);
                  line-height: 0.32rem;
                }
                .timer {
                  font-size: 0.22rem;
                  font-weight: 400;
                  color: rgba(153, 153, 153, 1);
                  line-height: 0.32rem;
                }
              }
              .t-right {
                display: flex;
                .num {
                  margin-right: 0.2rem;
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                }
                .praise {
                  width: 0.24rem;
                  height: 0.26rem;
                  img {
                    width: 100%;
                  }
                }
              }
            }
            .centers {
              font-weight: 500;
              color: rgba(68, 68, 68, 1);
              line-height: 0.48rem;
            }
            .bottom {
              margin-top: 0.31rem;
              font-weight: 500;
              color: rgba(56, 117, 209, 1);
              line-height: 0.32;
            }
            .bottom::after {
              content: ">";
              font-size: 0.28rem;
              margin-left: 0.1rem;
              color: rgba(56, 117, 209, 1);
            }
          }
        }
      }
    }
  }
  // 发表评论部分
  .send-comment {
    width: 100%;
    height: 0.89rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.24rem;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    border: 0.01rem solid rgba(234, 234, 234, 1);
    input {
      width: 85%;
      height: 100%;
    }
    input::-webkit-input-placeholder {
      font-size: 0.28rem;
      color: #999999;
    }
    .send-btn {
      font-weight: bold;
      color: rgba(84, 4, 121, 1);
    }
  }

  // 回复评论模态框样式
  .comment-model {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    .content {
      width: 90%;
      border-radius: 0.2rem;
      padding: 0.14rem 0.24rem;
      box-sizing: border-box;
      height: 1rem;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%);
      background-color: #fff;
      .reply-comment {
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
